<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享表格协作系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/handsontable.full.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>

<body>
    <!-- 登录注册容器 -->
    <div id="auth-container" class="auth-container" style="display: none;">
        <h4 class="mb-4">欢迎使用协作表格</h4>
        <div class="mb-3">
            <input type="text" id="username" class="form-control" placeholder="用户名">
        </div>
        <div class="mb-3">
            <input type="password" id="password" class="form-control" placeholder="密码">
        </div>
        <button onclick="login()" class="btn btn-primary w-100 mb-2">登录</button>
        <button onclick="register()" class="btn btn-outline-secondary w-100">注册</button>
        <div id="auth-error" class="text-danger mt-2 auth-error"></div>
    </div>

    <!-- 登录注册容器 -->
    <div id="auth-container" class="auth-container" style="display: none;">
        <h4 class="mb-4">欢迎使用协作表格</h4>
        <div class="mb-3">
            <input type="text" id="username" class="form-control" placeholder="用户名">
        </div>
        <div class="mb-3">
            <input type="password" id="password" class="form-control" placeholder="密码">
        </div>
        <button onclick="login()" class="btn btn-primary w-100 mb-2">登录</button>
        <button onclick="register()" class="btn btn-outline-secondary w-100">注册</button>
        <div id="auth-error" class="text-danger mt-2 auth-error"></div>
    </div>

    <!-- 主界面容器 -->
    <div id="main-container" style="display: none;">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>我的协作表格</h3>
            <div>
                <button class="btn btn-success" onclick="showCreateDocModal()">新建文档</button>
                <button class="btn btn-outline-danger" onclick="logout()">退出登录</button>
            </div>
        </div>

        <!-- 文档列表 -->
        <div class="doc-list mb-4">
            <div id="doc-list-content"></div>
            <div id="doc-list-pagination" class="pagination"></div>
            <button id="toggle-doc-list" class="toggle-button" onclick="toggleDocList()">展开文档列表</button>
        </div>

        <!-- 编辑区域 -->
        <div class="status-bar">
            <div>
                当前状态: <span id="lock-status" class="badge bg-secondary">只读模式</span>
                <span id="lock-owner" class="ms-2 text-muted"></span>
            </div>
            <button id="btn-get-lock" class="btn btn-warning btn-sm" onclick="requestEditLock()">获取编辑权限</button>
        </div>
        <div id="excel-container"></div>

        <!-- 操作按钮 -->
        <div class="d-flex gap-2 justify-content-end">
            <button class="btn btn-primary" onclick="saveDocument()">保存版本</button>
            <button class="btn btn-info" onclick="showVersionHistory()">版本历史</button>
        </div>
    </div>

    <!-- 创建文档模态框 -->
    <div class="modal fade" id="createDocModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">创建新文档</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="newDocTitle" class="form-control" placeholder="文档标题">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="createDocument()">创建</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 版本历史模态框 -->
    <div class="modal fade" id="versionHistoryModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">版本历史</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="version-list"></div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/handsontable.full.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>

</html>